<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('秒杀商品')" />
</head>
<body>
<th:block th:include="include :: top" />


<div class="col-lg-6 mx-auto p-4 py-md-5">





    <div class="containers">
        <div class="goods_view">
            <img th:src="@{${goods.goodsImg}}" width="560"/>
        </div>
        <div class="goods_info">
            <h2 th:text="${goods.goodsName}"></h2>
            <p class="title" th:text="${goods.goodsTitle}"></p>
            <p>
                <span class="price1" th:text="${goods.seckilPrice}+'元  '"></span>
                <del><span class="price2" th:text="${goods.goodsPrice}+'元'"></span></del>
            </p>
            <div class="seckill_data">
                <div>
                    <span>秒杀开始时间</span>
                    <p th:text="${#temporals.format(goods.startDate, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
                <div>
                    <span>秒杀结束时间</span>
                    <p th:text="${#temporals.format(goods.endDate, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
            </div>



            <form method="post" th:action="@{'/api/redis_one/v4'}">
                <button class="btn btn-primary btn-block" type="button" id="buyButton">秒杀</button>
                <input type="hidden" name="goodsId" id="goodsId" th:value="${goods.id}"/>
            </form>
            <div id="dialog"></div>
        </div>
    </div>
</div>

</body>
<th:block th:include="include :: js" />

<script th:inline="javascript">
$(document).ready(function () {


function show(msg){
    $('#dialog').html('<h2>'+msg+'</h2>');
    $('#dialog').show();
    $('#dialog').fadeOut( 400 ,function(){

    });
}


/* 判断 user 是否为 null，如果为 null 则 user_id 为空字符串 */
var user_id = /*[[${user == null ? '' : user.id}]]*/ '';


$("#buyButton").on("click", function() {
    if (undefined==auth || user_id=="") {
        location.href = "/login";
    } else {
        //const payload =parseJwt(auth);
        var data = {goods_id: $("#goodsId").val(), user_id: user_id};
        $.ajax({
            headers: {
                Authorization: "Bearer " + auth
            },
            type: 'GET',
            url: '/api/redis_one/v4',
            data : data,
            dataType: 'json',
            success: function(data) {
                if (data.code == 200) {
                    show("秒杀成功");
                } else {
                    show(data.msg);
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                jsonValue = jQuery.parseJSON( xhr.responseText );
                //console.log(jsonValue.Message);
                //console.info(xhr.responseText);
                show(jsonValue.msg);
            }
        });
    }
});

});
</script>



</html>
